<template>
  <div class="historical pd_40">
    <div class="w90">
      <div class="historical_title">趋势图</div>
      <!--七天趋势图-->
      <div class="analysis_echart">
        <div class="analysis_list fec">
          <div class="block">
            <span class="mg_r10">选择查询板块</span>
            <el-select v-model="value" placeholder="合计">
              <el-option value="222"></el-option>
            </el-select>
          </div>
          <div class="block mg_l15">
            <span class="demonstration mg_r10">选择查询时间段</span>
            <el-date-picker
              v-model="value6"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']">
            </el-date-picker>
          </div>
          <p class="mg_l10"><el-button type="primary">查询</el-button></p>
        </div>
      </div>
      <div id="myChart" :style="{width: '1200px', height: '600px'}"></div>
    </div>
   
    <div class="w90">
      <div class="historical_title mg_t50">各核心版块历史数据</div>
      <div class="historical_query fec  mg_t20 mg_b20">
        <div class="fsc">
          <div class="block">
            <span class="mg_r10">选择查询板块</span>
            <el-select v-model="value" placeholder="合计">
              <el-option value="222"></el-option>
            </el-select>
          </div>
          <div class="block mg_l20">
            <span class="demonstration mg_r10">选择查询时间</span>
            <el-date-picker
              v-model="value6"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']">
            </el-date-picker>
          </div>
          <p class="mg_l20"><el-button type="primary">查询</el-button></p>
        </div>
      </div>
      <el-table
        :data="tableData"
        stripe
        style="100%">
        <el-table-column
          prop="date"
          align="center"
          label="日期"
          width="130">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="打开次数"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          prop="address"
          label="打开人数">
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          prop="address"
          label="评论人数">
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          prop="address"
          label="转发人数">
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          prop="address"
          label="点赞人数">
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          prop="address"
          label="收藏人数">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          width="120"
          label="想去看看">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          width="120"
          label="到此一游">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          width="120"
          label="搜索次数">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          width="120"
          label="搜索人数">
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          prop="address"
          label="广告点击人数">
        </el-table-column>
      </el-table>
      <div class="block fec mg_t30">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
    </div>


    <div class="w90">
      <div class="historical_title mg_t50">用户数据</div>
      <div class="historical_query fec  mg_t20 mg_b20">
        <div class="fsc">
          <div class="block">
            <span class="demonstration mg_r20">选择查询时间</span>
            <el-date-picker
              v-model="value6"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']">
            </el-date-picker>
          </div>
          <p class="mg_l20"><el-button type="primary">查询</el-button></p>
        </div>
      </div>
      <el-table
        :data="tableData"
        stripe
        style="100%">
        <el-table-column
          prop="date"
          align="center"
          label="日期"
          width="130">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="新增注册"
          width="120">
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          prop="address"
          label="累计注册">
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          prop="address"
          label="活跃用户">
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          prop="address"
          label="旅拍用户">
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          prop="address"
          label="新增达人">
        </el-table-column>
        <el-table-column
          align="center"
          width="120"
          prop="address"
          label="加精用户">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          width="120"
          label="违规用户">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          width="120"
          label="邀请达人">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          width="120"
          label="用户投诉">
        </el-table-column>
      </el-table>
      <div class="block fec mg_t30">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
    </div>
    
  </div>

</template>

<script>
  import data1 from './list.js';
  export default {
    name: 'hello',
    data () {
      return {
        value: '',
        value6: '',
        dialogTableVisible: false,
        tableData: [{
          date: '住宿',
          name: '王小虎',
          address: '11111'
        }, {
          date: '11134入11',
          name: '吃饭',
          address: '1343788'
        }, {
          date: '2233431',
          name: '喝水',
          address: '111111'
        }, {
          date: '52341',
          name: '天天',
          address: '11323211'
        }],
        list: [],
        index: 1,
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted(){
      this.drawLine();
      console.log(data1)
      
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      isindex(num) {
        console.log(num)
        this.index = num;
        this.drawLine()
      },
      addList() {
        let obj = {};
        obj = data1.find((item)=> {
          return item.id == this.index
        })
        console.log(obj)
        this.list = [];
        obj.data.forEach((value,key)=> {
          this.list.push({name:value.name,type: 'line',data:value.data})
        })
        
      },
      drawLine(){
        this.addList();
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('myChart'))
          // 绘制图表
          myChart.setOption({
            title: {
              left: '0',
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              orient: 'vertical', 
              backgroundColor:'#fff',
              right: '0',
              top: '50px',
              itemGap: 20, 
              // data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
            },
            grid: {
              left: '0',
              right: '100px',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                  saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: true,
              data: ['2019-1-1','2019-1-2','2019-1-3','2019-1-4','2019-1-5','2019-1-6','2019-1-7']
            },
            yAxis: {
              type: 'value',
              scale : true,
              show : true,
              splitLine:{  
          　　    show:true  
          　　}, 
            },
            series: this.list
            
          });
          
        }
     }
  }
</script>

<style scoped lang="less">
  .historical {
    padding-bottom: 200px;
  }
  .historical_title {
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
    font-weight: bold;
  }
  .table_box {
    padding: 20px 5px;
    display: inline-block;
    border: 1px solid #000;
    caption {
      padding: 0 20px;
      div{
        height: 30px; 
        border-bottom: 1px solid #000;
        font-weight: bold;
      }
    }
    .analysis_table {
      td,th {
        padding: 0 3px;
        vertical-align: middle;
      }
    }
  }
  .analysis_row {
    width: 80%;
  }
  .analysis_echart {
    position: relative;
    padding-top: 20px;
  }
  .analysis_list {
    // margin-left: 280px
  }
  .analysis_table1 {
    margin-bottom: 150px;
  }
  .analysis_dialog {
    border-bottom: 1px solid #999;
    padding-bottom: 30px;
  }
</style>